<template>
  <Page class="bg-[#f5f5f5] text-[#333] min-h-screen pb-[88rpx]">
    <!-- 头部区域 -->

    <PageHeader title="我的订单" :showBack="true"/>
    
    <!-- 统计概览 -->
    <view class="stats-overview bg-white p-[24rpx] shadow-md rounded-[24rpx] mx-[24rpx] mt-[24rpx] mb-[16rpx]">
      <view class="stats-container flex justify-around text-center gap-x-[24rpx]">
        <view v-for="(stat, index) in stats" :key="index" class="stat-item p-[12rpx] flex-1">
          <view class="stat-value text-[32rpx] font-bold text-[#165DFF]">{{ stat.value }}</view>
          <view class="stat-label text-[22rpx] text-[#666] mt-[8rpx]">{{ stat.label }}</view>
        </view>
      </view>
    </view>
    
    <!-- 状态筛选 -->
    <view class="status-filter p-[24rpx] bg-white border-t border-b border-[#eee] mx-[24rpx] rounded-[24rpx] mb-[16rpx]">
      <view class="status-title text-[24rpx] mb-[12rpx] text-[#666]">{{ currentStatus }}</view>
      <view class="status-buttons flex gap-x-[16rpx] overflow-x-auto">
        <view 
          v-for="(status, index) in statusFilters" 
          :key="index"
          class="status-btn flex-shrink-0 px-[24rpx] py-[12rpx] bg-[#f5f5f5] rounded-[24rpx] text-center text-[24rpx] cursor-pointer whitespace-nowrap font-medium transition-all duration-200"
          :class="{ 'bg-blue-500 text-white font-bold shadow': activeStatus === index, 'text-gray-500': activeStatus !== index }"
          @click="handleStatusChange(index, status)"
        >
          {{ status }}
        </view>
      </view>
    </view>
    
    <!-- 订单记录列表 -->
    <view class="order-records p-[24rpx] min-h-[calc(100vh-420rpx)] flex flex-col gap-y-[20rpx]">
      <view 
        v-for="(record, index) in filteredRecords" 
        :key="index"
        class="record-card bg-white rounded-[24rpx] p-[24rpx] shadow-md relative flex flex-col"
        :class="getRecordClass(record.status)"
        @tap="handleDetail(record)"
      >
        <view class="record-header flex justify-between mb-[16rpx] items-center">
          <view class="record-title text-[28rpx] font-bold flex-1 text-[#222]">{{ record.title }}</view>
          <view class="record-status text-[22rpx] px-[16rpx] py-[6rpx] rounded-[16rpx] font-bold bg-[#f5f5f5]" :class="getStatusClass(record.status)">{{ record.statusText }}</view>
        </view>
        <view class="record-time text-[22rpx] text-[#666] mb-[12rpx]">
          <view>{{ record.timeRange }}</view>
          <view>{{ record.statusDesc }}</view>
        </view>
        <view class="record-details flex mb-[12rpx] gap-x-[12rpx]">
          <view 
            v-for="(detail, dIndex) in record.details" 
            :key="dIndex"
            class="detail-item flex-1 p-[8rpx] text-[22rpx] bg-[#f9f9f9] rounded-[12rpx] flex flex-col"
          >
            <view class="detail-label text-[#999] text-[20rpx]">{{ detail.label }}</view>
            <view class="detail-value font-bold">{{ detail.value }}</view>
          </view>
        </view>
        <view class="record-actions flex justify-between mt-[16rpx] gap-x-[16rpx]">
          <nut-button 
            v-for="(action, aIndex) in record.actions" 
            :key="aIndex"
            class="text-[26rpx] font-bold transition-all duration-300 min-w-[120rpx] shadow-md"
            :type="action.primary ? 'primary' : 'default'"
            
            @tap.stop="handleDetail(action)"
          >
            查看详情
          </nut-button>
        </view>
      </view>
    </view>
    
   
  </Page>
</template>

<script setup>
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

// 统计数据
const stats = [
  { value: '¥1,685', label: '本月收入' },
  { value: '36单', label: '已完成任务' },
  { value: '4.8分', label: '平均评分' }
]

// 状态筛选
const statusFilters = ['全部', '待确认', '进行中', '待评价', '已完成', '已取消']
const activeStatus = ref(0)
const currentStatus = ref('订单状态')

// 订单记录数据
const records = [
  {
    title: '物流晚班分拣员',
    status: 1, // 1:已完成, 2:进行中, 3:已取消, 4:待确认
    statusText: '已完成',
    timeRange: '2023-10-15 20:00 - 次日01:00 (5小时)',
    statusDesc: '完成时间：2023-10-16 01:10',
    details: [
      { label: '任务收入', value: '¥180' },
      { label: '发布方', value: '京东物流园' },
      { label: '地点', value: '高新区' }
    ],
    actions: [
      { text: '查看评价', primary: false },
      { text: '再次接单', primary: false }
    ]
  },
  {
    title: '超市理货员',
    status: 1,
    statusText: '待评价',
    timeRange: '2023-10-16 07:00 - 15:00 (8小时)',
    statusDesc: '完成时间：2023-10-16 15:05',
    details: [
      { label: '任务收入', value: '¥150' },
      { label: '发布方', value: '沃尔玛超市' },
      { label: '地点', value: '西乡塘区' }
    ],
    actions: [
      { text: '去评价', primary: false },
      { text: '查看详情', primary: false }
    ]
  },
  {
    title: '企业宣传海报设计',
    status: 2,
    statusText: '进行中',
    timeRange: '2023-10-17 18:00 - 22:00 (4小时)',
    statusDesc: '剩余时间：1小时20分',
    details: [
      { label: '任务收入', value: '¥200' },
      { label: '发布方', value: '万象城海天餐厅' },
      { label: '地点', value: '青秀区' }
    ],
    actions: [
      { text: '签到打卡', primary: false },
      { text: '有纠纷', primary: true }
    ]
  },
  {
    title: '展会搭建协助',
    status: 4,
    statusText: '待确认',
    timeRange: '2023-10-18 08:00 - 17:00 (8小时)',
    statusDesc: '状态：等待雇主确认',
    details: [
      { label: '任务收入', value: '¥300' },
      { label: '发布方', value: '国际会展中心' },
      { label: '地点', value: '青秀区' }
    ],
    actions: [
      { text: '取消申请', primary: false },
      { text: '联系雇主', primary: false }
    ]
  },
  {
    title: '家具搬运协助',
    status: 3,
    statusText: '已取消',
    timeRange: '2023-10-10 14:00 - 16:00 (2小时)',
    statusDesc: '取消时间：2023-10-10 13:20',
    details: [
      { label: '任务收入', value: '¥100' },
      { label: '发布方', value: '个人雇主' },
      { label: '地点', value: '兴宁区' }
    ],
    actions: [
      { text: '再次申请', primary: false },
      { text: '查看详情', primary: false }
    ]
  }
]

// 底部导航数据
const workerTabs = [
  { icon: 'icon-taskhall', label: '任务大厅' },
  { icon: 'icon-wallet', label: '钱包' },
  { icon: 'icon-record', label: '接单记录' },
  { icon: 'icon-credit', label: '信用评级' },
  { icon: 'icon-user', label: '我的' }
]

// 活跃状态
const activeTab = ref(2) // 默认选中接单记录

// 计算属性：根据筛选条件过滤记录
const filteredRecords = computed(() => {
  if (activeStatus.value === 0) { // 全部
    return records
  }
  
  // 状态映射关系：1-已完成/待评价, 2-进行中, 3-已取消, 4-待确认
  const statusMap = {
    1: [1], // 已完成和待评价都属于状态1
    2: [2],
    3: [1], // 待评价属于状态1
    4: [1], // 已完成属于状态1
    5: [3]
  }
  
  return records.filter(record => statusMap[activeStatus.value].includes(record.status))
})

// 获取记录样式
const getRecordClass = (status) => {
  const classes = {
    1: 'border-l-[4rpx] border-l-[#52c41a]',
    2: 'border-l-[4rpx] border-l-[#ffc53d]',
    3: 'border-l-[4rpx] border-l-[#ff4d4f]',
    4: 'border-l-[4rpx] border-l-[#8c8c8c]'
  }
  return classes[status] || ''
}

// 获取状态样式
const getStatusClass = (status) => {
  const classes = {
    1: 'bg-[#f6ffed] text-[#52c41a]',
    2: 'bg-[#fffbe6] text-[#faad14]',
    3: 'bg-[#fff2f0] text-[#ff4d4f]',
    4: ''
  }
  return classes[status] || ''
}

// 处理状态变更
const handleStatusChange = (index, status) => {
  activeStatus.value = index
  currentStatus.value = `订单状态: ${status}`
  Taro.showToast({
    title: `已筛选: ${status}的订单`,
    icon: 'none',
    duration: 2000
  })
}

// 处理操作点击
const handleActionClick = (actionText, taskTitle) => {
  if (actionText.includes('评价')) {
    Taro.showToast({
      title: `正在${actionText}: ${taskTitle}`,
      icon: 'none',
      duration: 2000
    })
  } else if (actionText.includes('签到')) {
    Taro.showToast({
      title: `已成功${actionText}`,
      icon: 'success',
      duration: 2000
    })
  } else if(actionText.includes('纠纷')){
    Taro.navigateTo({
      url: '/pages/webs/dispute'
    })
  }
}

const handleDetail = (record) => {
  Taro.navigateTo({
    url: `/pages/webs/order-detail?id=${record.id}`
  })
}

</script>